<template>
  <div class="avatar" :style="avatarStyle">
    <span class="name" :style="nameStyle">{{ name }}</span>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from "vue";

const props = defineProps<{
  name: string;
  size?: number | string; // 头像尺寸
  fontSize?: number | string; // 字体大小
}>();

const avatarSize = computed(() => {
  if (props.size !== undefined) {
    return typeof props.size === "number" ? `${props.size}px` : props.size;
  }
  return "40px";
});

const fontSize = computed(() => {
  if (props.fontSize !== undefined) {
    return typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize;
  }
  // 默认字体为头像尺寸的一半
  return `calc(${avatarSize.value} / 2)`;
});

const avatarStyle = computed(() => ({
  width: avatarSize.value,
  height: avatarSize.value,
  backgroundColor: "var(--avatar-background-color)",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "50%",
  color: "white",
  fontFamily: "Arial, sans-serif",
}));

const nameStyle = computed(() => ({
  fontSize: fontSize.value,
}));
</script>

<style lang="scss" scoped>
.avatar {
  box-sizing: border-box;
  user-select: none;
}
</style>
